<template>
  <div v-loading="loading" style="padding:10px">
    <!-- header  -->
    <div style="display: flex">
      <el-form :inline="true">
        <el-form-item label="企业名称:">
          <el-input style="width:150px;" v-model="search.orgName" placeholder="企业名称"></el-input>
        </el-form-item>
        <el-form-item label="设备名称:">
          <el-input style="width:150px;" v-model="search.deviceName" placeholder="设备名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="search.startTime" type="datetime" placeholder="起始时间" default-time="00:00:00"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="search.endTime" type="datetime" placeholder="终止时间" default-time="00:00:00"></el-date-picker>
        </el-form-item>
      </el-form>
      <div>
        <el-button size="small" @click="searchDevice">查询</el-button>
      </div>
      <div class="header-button">
        <el-button type="primary" size="small" @click="searchDevice">统计闲置设备</el-button>
      </div>
      <div class="header-button">
        <el-button type="success">导出</el-button>
      </div>
    </div>
    <el-table class="deviceDetaHeight">
      <el-table-column prop="" label="企业" ></el-table-column>
      <el-table-column prop="" label="设备编号" ></el-table-column>
      <el-table-column prop="" label="时间" ></el-table-column>
      <el-table-column prop="" label="运行时间" ></el-table-column>
      <el-table-column prop="" label="运行距离" ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import moment from "moment";

export default {
  data() {
    return {
      loading: false,
      search: {
        orgName: "",
        deviceName: "",
        startTime: "",
        endTime: ""
      }
    };
  },
  watch: {},
  methods: {
    // ..
    async searchDevice() {
      const { search } = this;
      if (search.startTime)
        search.startTime = moment(search.startTime).format("X") * 1000;
      else search.startTime = "";
      if (search.endTime)
        search.endTime = moment(search.endTime).format("X") * 1000;
      else search.endTime = "";
      try {
        const { code, message, respData } = (await this.$http.post(
          "/api/manager/usage/list",
          {
            orgId: "",
            deviceId: "",
            startTime: "",
            endTime: "",
            needPaging: "true",
            currPage: 1,
            pageSize: 10
          }
        )).body;
        console.log(respData);
      } catch (e) {
        const message = e.statusText || e.message;
        this.$message.error(message);
      }
    }
  },
  mounted() {}
};
</script>

<style scoped>
>>> .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 185px;
}
.header-button {
  margin-left: 10px;
}
>>> .deviceDetaHeight {
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  max-width: 100%;
  color: #606266;
  height: 85%;
  max-height: 85%;
}
</style>

